<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站底部文章活动组件</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #007bff;
      --secondary: #6c757d;
      --light: #f8f9fa;
      --dark: #343a40;
      --white: #ffffff;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      --border: #eee;
      
      /* 主题色 */
      --theme1: #1877F2; /* 社交蓝 */
      --theme2: #E4405F; /* 活力粉 */
      --theme3: #00C853; /* 清新绿 */
      --theme4: #212529; /* 商务黑 */
      --theme5: #FF9800; /* 温暖橙 */
      --theme6: #9C27B0; /* 个性紫 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
      position: relative;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    
    /* 页面内容 */
    .page-header {
      padding: 15px 20px;
      border-bottom: 1px solid var(--border);
      text-align: center;
    }
    
    .page-title {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
    }
    
    .content-area {
      padding: 15px;
      height: calc(100vh - 100px);
      overflow-y: auto;
    }
    
    .feed-item {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 15px;
      box-shadow: var(--shadow);
    }
    
    .feed-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    
    .feed-content {
      padding: 15px;
    }
    
    .feed-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    
    .feed-desc {
      font-size: 14px;
      color: #666;
      margin-bottom: 12px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .feed-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #999;
    }
    
    /* 底部组件容器 */
    .bottom-container {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      z-index: 1000;
      transform: translateY(100%);
      transition: transform 0.3s ease;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
    }
    
    .bottom-container.active {
      transform: translateY(0);
    }
    
    .bottom-drag-handle {
      width: 40px;
      height: 4px;
      background-color: #ddd;
      border-radius: 2px;
      margin: 8px auto;
    }
    
    .bottom-header {
      padding: 15px 20px 10px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .bottom-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .close-bottom {
      background: none;
      border: none;
      font-size: 20px;
      color: var(--dark);
      cursor: pointer;
    }
    
    .bottom-content {
      max-height: 60vh;
      overflow-y: auto;
      padding: 15px 20px;
    }
    
    /* 底部组件样式1 - 文章详情 */
    .bottom-article .article-header {
      margin-bottom: 15px;
    }
    
    .article-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    
    .article-meta {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #666;
      margin-bottom: 15px;
    }
    
    .article-author {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .author-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .article-image {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 15px;
    }
    
    .article-text {
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 15px;
    }
    
    .article-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 15px;
    }
    
    .article-tag {
      background-color: rgba(0, 0, 0, 0.05);
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 12px;
    }
    
    /* 底部组件样式2 - 活动详情 */
    .bottom-event .event-banner {
      width: 100%;
      height: 140px;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 15px;
    }
    
    .event-banner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .event-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    
    .event-info {
      margin-bottom: 15px;
    }
    
    .event-info-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 10px;
      font-size: 14px;
    }
    
    .event-info-icon {
      color: var(--primary);
      margin-top: 3px;
      min-width: 16px;
    }
    
    .event-description {
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 15px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }
    
    /* 底部组件样式3 - 评论区 */
    .bottom-comments .comment-list {
      margin-bottom: 15px;
    }
    
    .comment-item {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;
    }
    
    .comment-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .comment-content {
      flex: 1;
    }
    
    .comment-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
    }
    
    .comment-author {
      font-size: 13px;
      font-weight: 600;
    }
    
    .comment-time {
      font-size: 11px;
      color: #999;
    }
    
    .comment-text {
      font-size: 14px;
      margin-bottom: 5px;
    }
    
    .comment-actions {
      display: flex;
      gap: 15px;
      font-size: 12px;
      color: #666;
    }
    
    .comment-action {
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
    }
    
    .comment-box {
      display: flex;
      gap: 10px;
      padding-top: 15px;
      border-top: 1px solid var(--border);
    }
    
    .comment-input {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 20px;
      font-size: 14px;
      outline: none;
    }
    
    .comment-send {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: var(--primary);
      color: white;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    
    /* 底部组件样式4 - 分享选项 */
    .bottom-share .share-title {
      font-size: 16px;
      margin-bottom: 15px;
      text-align: center;
    }
    
    .share-options {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
      margin-bottom: 20px;
    }
    
    .share-option {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }
    
    .share-icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: var(--primary);
    }
    
    .share-text {
      font-size: 12px;
      text-align: center;
    }
    
    .share-note {
      font-size: 13px;
      color: #666;
      text-align: center;
      padding: 10px;
      background-color: rgba(0, 0, 0, 0.03);
      border-radius: 8px;
    }
    
    /* 底部组件样式5 - 点赞与收藏 */
    .bottom-reactions .reactions-title {
      font-size: 16px;
      margin-bottom: 15px;
      text-align: center;
    }
    
    .reaction-options {
      display: flex;
      justify-content: space-around;
      margin-bottom: 20px;
    }
    
    .reaction-option {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      cursor: pointer;
    }
    
    .reaction-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.05);
    }
    
    .reaction-text {
      font-size: 12px;
    }
    
    .favorites-section {
      padding-top: 15px;
      border-top: 1px solid var(--border);
    }
    
    .favorites-title {
      font-size: 15px;
      margin-bottom: 10px;
      font-weight: 600;
    }
    
    .favorites-options {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .favorites-option {
      padding: 8px 15px;
      background-color: rgba(0, 0, 0, 0.05);
      border-radius: 20px;
      font-size: 13px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    /* 底部组件样式6 - 相关推荐 */
    .bottom-related .related-title {
      font-size: 16px;
      margin-bottom: 15px;
      font-weight: 600;
    }
    
    .related-list {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    
    .related-item {
      display: flex;
      gap: 12px;
      cursor: pointer;
    }
    
    .related-image {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      object-fit: cover;
      flex-shrink: 0;
    }
    
    .related-content {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    
    .related-title-text {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .related-meta {
      font-size: 12px;
      color: #999;
      margin-top: auto;
    }
    
    /* 底部操作栏 */
    .action-bar {
      display: flex;
      justify-content: space-around;
      padding: 12px 0;
      border-top: 1px solid var(--border);
    }
    
    .action-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      background: none;
      border: none;
      color: var(--dark);
      font-size: 12px;
      cursor: pointer;
      padding: 5px 10px;
    }
    
    .action-icon {
      font-size: 18px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 遮罩层 */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .overlay.active {
      opacity: 1;
      visibility: visible;
    }
    
    /* 主题样式 */
    .theme1 { --primary: var(--theme1); }
    .theme2 { --primary: var(--theme2); }
    .theme3 { --primary: var(--theme3); }
    .theme4 { --primary: var(--theme4); }
    .theme5 { --primary: var(--theme5); }
    .theme6 { --primary: var(--theme6); }
    
    /* 主题1：社交蓝 */
    .theme1 .bottom-container {
      background-color: #f9fafd;
    }
    
    .theme1 .share-icon,
    .theme1 .reaction-icon,
    .theme1 .favorites-option {
      background-color: rgba(24, 119, 242, 0.1);
    }
    
    /* 主题2：活力粉 */
    .theme2 .bottom-container {
      background-color: #fff5f8;
    }
    
    .theme2 .share-icon,
    .theme2 .reaction-icon,
    .theme2 .favorites-option {
      background-color: rgba(228, 64, 95, 0.1);
    }
    
    /* 主题3：清新绿 */
    .theme3 .bottom-container {
      background-color: #f0fff4;
    }
    
    .theme3 .share-icon,
    .theme3 .reaction-icon,
    .theme3 .favorites-option {
      background-color: rgba(0, 200, 83, 0.1);
    }
    
    /* 主题4：商务黑 */
    .theme4 {
      --border: #333;
      --dark: white;
    }
    
    .theme4 .container,
    .theme4 .bottom-container,
    .theme4 .feed-item,
    .theme4 .comment-input,
    .theme4 .share-note,
    .theme4 .favorites-option {
      background-color: #121212;
    }
    
    .theme4 .feed-desc,
    .theme4 .feed-meta,
    .theme4 .article-meta,
    .theme4 .article-tag,
    .theme4 .event-info,
    .theme4 .comment-time,
    .theme4 .comment-actions,
    .theme4 .share-text,
    .theme4 .share-note,
    .theme4 .reaction-text,
    .theme4 .related-meta,
    .theme4 .close-bottom {
      color: #aaa;
    }
    
    .theme4 .share-icon,
    .theme4 .reaction-icon {
      background-color: rgba(255, 255, 255, 0.1);
    }
    
    .theme4 .bottom-drag-handle {
      background-color: #444;
    }
    
    /* 主题5：温暖橙 */
    .theme5 .bottom-container {
      background-color: #fff8e6;
    }
    
    .theme5 .share-icon,
    .theme5 .reaction-icon,
    .theme5 .favorites-option {
      background-color: rgba(255, 152, 0, 0.1);
    }
    
    /* 主题6：个性紫 */
    .theme6 .bottom-container {
      background-color: #f3e5f5;
    }
    
    .theme6 .share-icon,
    .theme6 .reaction-icon,
    .theme6 .favorites-option {
      background-color: rgba(156, 39, 176, 0.1);
    }
    
    /* 动画 */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    .bottom-enter {
      animation: fadeIn 0.3s;
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">选择底部组件样式</div>
    <div class="switcher-option active" data-style="1">文章详情</div>
    <div class="switcher-option" data-style="2">活动详情</div>
    <div class="switcher-option" data-style="3">评论区</div>
    <div class="switcher-option" data-style="4">分享选项</div>
    <div class="switcher-option" data-style="5">点赞收藏</div>
    <div class="switcher-option" data-style="6">相关推荐</div>
  </div>
  
  <div class="container theme1">
    <div class="page-header">
      <h1 class="page-title">社交动态</h1>
    </div>
    
    <div class="content-area">
      <div class="feed-item">
        <img src="https://picsum.photos/id/26/600/400" alt="文章图片" class="feed-image">
        <div class="feed-content">
          <h3 class="feed-title">城市公园新景观开放，市民周末好去处</h3>
          <p class="feed-desc">本市中心公园经过三个月的改造，新增了多处景观和休闲设施，成为市民周末休闲的新选择...</p>
          <div class="feed-meta">
            <span>2小时前</span>
            <span>2.5k 浏览</span>
          </div>
        </div>
      </div>
      
      <div class="feed-item">
        <img src="https://picsum.photos/id/96/600/400" alt="活动图片" class="feed-image">
        <div class="feed-content">
          <h3 class="feed-title">2023年度城市马拉松比赛即将开始报名</h3>
          <p class="feed-desc">备受关注的城市马拉松比赛将于下月开始报名，今年新增了亲子组，适合全家参与...</p>
          <div class="feed-meta">
            <span>昨天</span>
            <span>5.8k 浏览</span>
          </div>
        </div>
      </div>
      
      <div class="feed-item">
        <img src="https://picsum.photos/id/65/600/400" alt="文章图片" class="feed-image">
        <div class="feed-content">
          <h3 class="feed-title">夏季健康饮食指南：如何吃得清爽又营养</h3>
          <p class="feed-desc">夏季来临，气温升高，如何调整饮食结构，既能保持清爽口感，又能保证营养均衡？本文为您详细介绍...</p>
          <div class="feed-meta">
            <span>3天前</span>
            <span>12.3k 浏览</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部操作栏 -->
    <div class="action-bar">
      <button class="action-button" data-target="article">
        <i class="fa fa-file-text-o action-icon"></i>
        <span>文章</span>
      </button>
      <button class="action-button" data-target="event">
        <i class="fa fa-calendar action-icon"></i>
        <span>活动</span>
      </button>
      <button class="action-button" data-target="comments">
        <i class="fa fa-comments action-icon"></i>
        <span>评论</span>
      </button>
      <button class="action-button" data-target="share">
        <i class="fa fa-share-alt action-icon"></i>
        <span>分享</span>
      </button>
      <button class="action-button" data-target="reactions">
        <i class="fa fa-heart action-icon"></i>
        <span>互动</span>
      </button>
    </div>
  </div>
  
  <!-- 底部组件1 - 文章详情 -->
  <div class="bottom-container bottom-article theme1" id="bottom-article">
    <div class="bottom-drag-handle"></div>
    <div class="bottom-header">
      <h3 class="bottom-title">文章详情</h3>
      <button class="close-bottom">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="bottom-content">
      <div class="article-header">
        <h2 class="article-title">城市公园新景观开放，市民周末好去处</h2>
        <div class="article-meta">
          <div class="article-author">
            <img src="https://picsum.photos/id/64/100" alt="作者头像" class="author-avatar">
            <span>城市生活报</span>
          </div>
          <span>2小时前</span>
        </div>
        <img src="https://picsum.photos/id/26/600/400" alt="文章图片" class="article-image">
        <div class="article-text">
          本市中心公园经过三个月的改造，新增了多处景观和休闲设施，成为市民周末休闲的新选择。<br><br>
          改造后的公园增加了2.5公里的健身步道，沿途设置了休息区和观景台。儿童游乐区也进行了全面升级，增加了更多适合不同年龄段儿童的游乐设施，并配备了专业的安全监护人员。<br><br>
          公园负责人表示，此次改造旨在为市民提供更好的休闲环境，同时推广健康生活方式。未来还将定期举办各类文化活动和健康讲座。
        </div>
        <div class="article-tags">
          <span class="article-tag">城市建设</span>
          <span class="article-tag">休闲娱乐</span>
          <span class="article-tag">健康生活</span>
          <span class="article-tag">本地新闻</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部组件2 - 活动详情 -->
  <div class="bottom-container bottom-event theme1" id="bottom-event">
    <div class="bottom-drag-handle"></div>
    <div class="bottom-header">
      <h3 class="bottom-title">活动详情</h3>
      <button class="close-bottom">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="bottom-content">
      <div class="event-banner">
        <img src="https://picsum.photos/id/96/600/400" alt="活动 banner">
      </div>
      <h2 class="event-title">2023年度城市马拉松比赛</h2>
      <div class="event-info">
        <div class="event-info-item">
          <i class="fa fa-calendar event-info-icon"></i>
          <div>2023年10月22日（星期日）上午8:00</div>
        </div>
        <div class="event-info-item">
          <i class="fa fa-map-marker event-info-icon"></i>
          <div>城市体育中心广场（起点）</div>
        </div>
        <div class="event-info-item">
          <i class="fa fa-user event-info-icon"></i>
          <div>主办方：市体育局、城市马拉松协会</div>
        </div>
        <div class="event-info-item">
          <i class="fa fa-ticket event-info-icon"></i>
          <div>报名费用：全程马拉松180元/人，半程马拉松120元/人，迷你马拉松60元/人，亲子组100元/组</div>
        </div>
      </div>
      <div class="event-description">
        备受关注的城市马拉松比赛将于下月开始报名，今年新增了亲子组，适合全家参与。比赛分为全程马拉松(42.195公里)、半程马拉松(21.0975公里)、迷你马拉松(5公里)和亲子组(3公里)四个组别。<br><br>
        报名时间：9月1日至9月30日<br>
        报名方式：官方网站或指定报名点<br>
        奖励设置：各组别前10名均有现金奖励和奖品，完赛选手可获得纪念奖牌和证书。
      </div>
    </div>
  </div>
  
  <!-- 底部组件3 - 评论区 -->
  <div class="bottom-container bottom-comments theme1" id="bottom-comments">
    <div class="bottom-drag-handle"></div>
    <div class="bottom-header">
      <h3 class="bottom-title">评论 (24)</h3>
      <button class="close-bottom">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="bottom-content">
      <div class="comment-list">
        <div class="comment-item">
          <img src="https://picsum.photos/id/65/100" alt="用户头像" class="comment-avatar">
          <div class="comment-content">
            <div class="comment-header">
              <span class="comment-author">李小明</span>
              <span class="comment-time">1小时前</span>
            </div>
            <div class="comment-text">这个公园改造得真不错，周末带孩子去看看，有没有一起的？</div>
            <div class="comment-actions">
              <div class="comment-action"><i class="fa fa-heart-o"></i> 24</div>
              <div class="comment-action"><i class="fa fa-comment-o"></i> 回复</div>
            </div>
          </div>
        </div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/id/91/100" alt="用户头像" class="comment-avatar">
          <div class="comment-content">
            <div class="comment-header">
              <span class="comment-author">张大山</span>
              <span class="comment-time">2小时前</span>
            </div>
            <div class="comment-text">健身步道修得很专业，昨晚去试跑了一下，感觉很好！</div>
            <div class="comment-actions">
              <div class="comment-action"><i class="fa fa-heart-o"></i> 15</div>
              <div class="comment-action"><i class="fa fa-comment-o"></i> 回复</div>
            </div>
          </div>
        </div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/id/177/100" alt="用户头像" class="comment-avatar">
          <div class="comment-content">
            <div class="comment-header">
              <span class="comment-author">王丽丽</span>
              <span class="comment-time">3小时前</span>
            </div>
            <div class="comment-text">儿童区的安全措施做得怎么样？有知道的朋友吗？</div>
            <div class="comment-actions">
              <div class="comment-action"><i class="fa fa-heart-o"></i> 8</div>
              <div class="comment-action"><i class="fa fa-comment-o"></i> 回复</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="comment-box">
        <img src="https://picsum.photos/id/64/100" alt="用户头像" class="comment-avatar">
        <input type="text" class="comment-input" placeholder="写下你的评论...">
        <button class="comment-send">
          <i class="fa fa-paper-plane"></i>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 底部组件4 - 分享选项 -->
  <div class="bottom-container bottom-share theme1" id="bottom-share">
    <div class="bottom-drag-handle"></div>
    <div class="bottom-header">
      <h3 class="bottom-title">分享</h3>
      <button class="close-bottom">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="bottom-content">
      <div class="share-title">将内容分享给好友</div>
      <div class="share-options">
        <div class="share-option">
          <div class="share-icon"><i class="fa fa-weixin"></i></div>
          <div class="share-text">微信好友</div>
        </div>
        <div class="share-option">
          <div class="share-icon"><i class="fa fa-weibo"></i></div>
          <div class="share-text">微博</div>
        </div>
        <div class="share-option">
          <div class="share-icon"><i class="fa fa-qq"></i></div>
          <div class="share-text">QQ好友</div>
        </div>
        <div class="share-option">
          <div class="share-icon"><i class="fa fa-link"></i></div>
          <div class="share-text">复制链接</div>
        </div>
        <div class="share-option">
          <div class="share-icon"><i class="fa fa-envelope"></i></div>
          <div class="share-text">邮件</div>
        </div>
        <div class="share-option">
          <div class="share-icon"><i class="fa fa-twitter"></i></div>
          <div class="share-text">Twitter</div>
        </div>
        <div class="share-option">
          <div class="share-icon"><i class="fa fa-facebook"></i></div>
          <div class="share-text">Facebook</div>
        </div>
        <div class="share-option">
          <div class="share-icon"><i class="fa fa-more"></i></div>
          <div class="share-text">更多</div>
        </div>
      </div>
      <div class="share-note">
        分享内容将包含原文链接，尊重原创，转载请注明出处
      </div>
    </div>
  </div>
  
  <!-- 底部组件5 - 点赞与收藏 -->
  <div class="bottom-container bottom-reactions theme1" id="bottom-reactions">
    <div class="bottom-drag-handle"></div>
    <div class="bottom-header">
      <h3 class="bottom-title">互动</h3>
      <button class="close-bottom">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="bottom-content">
      <div class="reactions-title">选择你的反应</div>
      <div class="reaction-options">
        <div class="reaction-option">
          <div class="reaction-icon"><i class="fa fa-heart"></i></div>
          <div class="reaction-text">喜欢</div>
        </div>
        <div class="reaction-option">
          <div class="reaction-icon"><i class="fa fa-thumbs-up"></i></div>
          <div class="reaction-text">赞</div>
        </div>
        <div class="reaction-option">
          <div class="reaction-icon"><i class="fa fa-surprise"></i></div>
          <div class="reaction-text">惊讶</div>
        </div>
        <div class="reaction-option">
          <div class="reaction-icon"><i class="fa fa-laugh-beam"></i></div>
          <div class="reaction-text">哈哈</div>
        </div>
        <div class="reaction-option">
          <div class="reaction-icon"><i class="fa fa-sad-tear"></i></div>
          <div class="reaction-text">难过</div>
        </div>
      </div>
      
      <div class="favorites-section">
        <div class="favorites-title">收藏到</div>
        <div class="favorites-options">
          <div class="favorites-option">我的收藏</div>
          <div class="favorites-option">周末计划</div>
          <div class="favorites-option">城市景点</div>
          <div class="favorites-option">亲子活动</div>
          <div class="favorites-option"><i class="fa fa-plus"></i> 新建</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部组件6 - 相关推荐 -->
  <div class="bottom-container bottom-related theme1" id="bottom-related">
    <div class="bottom-drag-handle"></div>
    <div class="bottom-header">
      <h3 class="bottom-title">相关推荐</h3>
      <button class="close-bottom">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="bottom-content">
      <div class="related-title">你可能也喜欢</div>
      <div class="related-list">
        <div class="related-item">
          <img src="https://picsum.photos/id/28/200" alt="推荐内容图片" class="related-image">
          <div class="related-content">
            <div class="related-title-text">城市周边十大徒步路线推荐，适合周末短途旅行</div>
            <div class="related-meta">3天前 · 8.2k浏览</div>
          </div>
        </div>
        
        <div class="related-item">
          <img src="https://picsum.photos/id/42/200" alt="推荐内容图片" class="related-image">
          <div class="related-content">
            <div class="related-title-text">秋季户外活动指南：注意事项与必备装备</div>
            <div class="related-meta">1周前 · 5.7k浏览</div>
          </div>
        </div>
        
        <div class="related-item">
          <img src="https://picsum.photos/id/62/200" alt="推荐内容图片" class="related-image">
          <div class="related-content">
            <div class="related-title-text">城市图书馆新馆开放，新增儿童阅读区和创客空间</div>
            <div class="related-meta">2周前 · 10.3k浏览</div>
          </div>
        </div>
        
        <div class="related-item">
          <img src="https://picsum.photos/id/87/200" alt="推荐内容图片" class="related-image">
          <div class="related-content">
            <div class="related-title-text">周末市集时间表：本月各区创意市集汇总</div>
            <div class="related-meta">3周前 · 6.5k浏览</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 遮罩层 -->
  <div class="overlay"></div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentType = '1';
    let bottomOpen = false;
    let activeBottom = null;
    
    // DOM元素
    const container = document.querySelector('.container');
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const bottomContainers = {
      '1': document.getElementById('bottom-article'),
      '2': document.getElementById('bottom-event'),
      '3': document.getElementById('bottom-comments'),
      '4': document.getElementById('bottom-share'),
      '5': document.getElementById('bottom-reactions'),
      '6': document.getElementById('bottom-related')
    };
    const actionButtons = document.querySelectorAll('.action-button');
    const closeButtons = document.querySelectorAll('.close-bottom');
    const overlay = document.querySelector('.overlay');
    
    // 初始化
    function init() {
      // 设置初始激活的底部组件
      activeBottom = bottomContainers[currentType];
      
      // 样式切换事件
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const type = this.getAttribute('data-style');
          switchType(type);
          openBottom();
        });
      });
      
      // 底部操作按钮点击事件
      actionButtons.forEach(button => {
        button.addEventListener('click', function() {
          const target = this.getAttribute('data-target');
          // 根据目标找到对应的类型
          const typeMap = {
            'article': '1',
            'event': '2',
            'comments': '3',
            'share': '4',
            'reactions': '5',
            'related': '6'
          };
          const type = typeMap[target];
          if (type) {
            switchType(type);
            openBottom();
          }
        });
      });
      
      // 关闭按钮点击事件
      closeButtons.forEach(btn => {
        btn.addEventListener('click', closeBottom);
      });
      
      // 遮罩层点击事件
      overlay.addEventListener('click', closeBottom);
      
      // 为交互元素添加事件
      addInteractionEvents();
    }
    
    // 添加交互事件
    function addInteractionEvents() {
      // 评论发送按钮
      const commentSend = document.querySelector('.comment-send');
      if (commentSend) {
        commentSend.addEventListener('click', function() {
          const input = document.querySelector('.comment-input');
          if (input.value.trim()) {
            alert(`评论已发送: ${input.value}`);
            input.value = '';
          }
        });
      }
      
      // 分享选项点击事件
      const shareOptions = document.querySelectorAll('.share-option');
      shareOptions.forEach(option => {
        option.addEventListener('click', function() {
          const text = this.querySelector('.share-text').textContent;
          alert(`已分享到 ${text}`);
          closeBottom();
        });
      });
      
      // 反应按钮点击事件
      const reactionOptions = document.querySelectorAll('.reaction-option');
      reactionOptions.forEach(option => {
        option.addEventListener('click', function() {
          const text = this.querySelector('.reaction-text').textContent;
          alert(`你选择了 ${text}`);
        });
      });
      
      // 收藏选项点击事件
      const favoriteOptions = document.querySelectorAll('.favorites-option');
      favoriteOptions.forEach(option => {
        option.addEventListener('click', function() {
          const text = this.textContent.trim();
          alert(`已收藏到 ${text}`);
        });
      });
      
      // 相关推荐点击事件
      const relatedItems = document.querySelectorAll('.related-item');
      relatedItems.forEach(item => {
        item.addEventListener('click', function() {
          const title = this.querySelector('.related-title-text').textContent;
          alert(`你点击了: ${title}`);
        });
      });
      
      // 评论互动事件
      const commentActions = document.querySelectorAll('.comment-action');
      commentActions.forEach(action => {
        action.addEventListener('click', function() {
          const icon = this.querySelector('i').className;
          const count = this.textContent.trim().split(' ')[1];
          if (icon.includes('heart')) {
            alert(`点赞成功，当前点赞数: ${count || 0}`);
          } else if (icon.includes('comment')) {
            alert('回复功能待实现');
          }
        });
      });
    }
    
    // 切换底部组件类型
    function switchType(type) {
      // 关闭当前打开的底部组件
      if (bottomOpen) {
        closeBottom();
      }
      
      // 更新当前类型
      currentType = type;
      
      // 更新容器主题
      container.className = 'container';
      container.classList.add(`theme${type}`);
      
      // 更新所有底部组件的主题
      Object.values(bottomContainers).forEach(container => {
        container.className = container.className.replace(/theme\d+/, '');
        container.classList.add(`theme${type}`);
      });
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (option.getAttribute('data-style') === type) {
          option.classList.add('active');
        }
      });
      
      // 更新激活的底部组件
      activeBottom = bottomContainers[type];
    }
    
    // 打开底部组件
    function openBottom() {
      if (!activeBottom) return;
      
      bottomOpen = true;
      activeBottom.classList.add('active', 'bottom-enter');
      overlay.classList.add('active');
      
      // 阻止背景滚动
      document.body.style.overflow = 'hidden';
    }
    
    // 关闭底部组件
    function closeBottom() {
      if (!activeBottom) return;
      
      bottomOpen = false;
      activeBottom.classList.remove('active');
      overlay.classList.remove('active');
      
      // 恢复背景滚动
      document.body.style.overflow = '';
    }
    
    // 启动
    init();
  </script>
</body>
</html>